<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>今天的励志话语是：</h1>
    <button onclick="init()">点我励志</button>
    <script>
        function init(){
            // 利用ajax向接口发送一个请求 将返回那句中文渲染到页面
            // 1.生成一个XMLHttpRequest对象
            let xhr = new XMLHttpRequest()
            // 2.发送请求 调用open方法来发送请求 第一个参数是请求方式 第二个参数是请求地址 请求是异步的
            // post请求携带的数据是通过请求体传递 放在send方法的参数内
            xhr.open('POST','http://localhost:3000/word')
            // 3.发送请求
            // 如果发送的是post请求 必须设置请求头
            xhr.setRequestHeader('content-Type','application/json')
            xhr.send(JSON.stringify({
                content:'活到老学到老' + Math.random()
            }))
            // 4.监听请求的状态
            xhr.onreadystatechange = function(){}
        }
    </script>
</body>
</html>